<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
</head>

<body>
    <div id="app" class="container">
        <base-layout>
            <template v-slot:header>
                头部  Header
            </template>

            <h3>主要内容区域</h3>
            <p>2019年1月28日 - vue 插槽手册 深入理解vue中的slot与slot-scope 插槽的使用其实是很简单首先要明白插槽是使用在子组件中的,2、插槽是为了将父组件中的子组件模板数据</p>

            <template v-slot:footer>
                页脚  Footer
            </template>
        </base-layout>
    </div>

    <script>
        Vue.component('base-layout', {
            template: `
                <div class="container">
                    <header>
                        <slot name="header"></slot>
                    </header>

                    <main>
                        <slot></slot>
                    </main>

                    <footer>
                        <slot name="footer"></slot>
                    </footer>
                </div>
            `
        });

        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
    </script>

    <hr>

    <div id="app2" class="container">
        <current-user>
            <template v-slot="u">
                {{u.user.lastname}}---{{u.person.gender}}
            </template>
        </current-user>
    </div>

    <script>
        Vue.component('currentUser', {
            template: `
                <span>
                    <slot :user="user" :person="person">{{user.firstname}}</slot>
                    </span>
            `,
            data() {
                return {
                    user: {
                        firstname: 'he',
                        lastname: 'kun'
                    },
                    person: {
                        gender: '男'
                    }
                }
            }
        });

        var app2 = new Vue({
            el: '#app2',
            data: {},
            methods: {}
        });
    </script>
</body>

</html>